<template>
    <div class="bg-fragmentUnionBox" :id="id">
        <div class="frgImgBox" :style="'background-image: url('+cardUrl+')'"></div>
        <div class="fragmentBox">
            <div class="ft-top">
                <span class="listFrgspan fragment1"><em v-if="getNumber(1)">{{getNumber(1)}}</em></span>
                <span class="listFrgspan fragment2"><em v-if="getNumber(2)">{{getNumber(2)}}</em></span>
            </div>
            <div class="ft-bottom">
                <span class="listFrgspan fragment3"><em v-if="getNumber(3)">{{getNumber(3)}}</em></span>
                <span class="listFrgspan fragment4"><em v-if="getNumber(4)">{{getNumber(4)}}</em></span>
            </div>
        </div>
        <slot/>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,onMounted } from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
export default {
    components:{
    },
    props:{
        fragmentNoList:{
            type:Array,
            default:[]
        },
        cardUrl:String,
        styleType:Number,
        id:{
            type:String,
            default:'fragmentUnionBox'
        },
        style:String,
        item:{
            type:Object,
            default:{}
        }
    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()

        const state = reactive({
            
        })

        onMounted(()=>{
            const ele = document.querySelector(`.bg-fragmentUnionBox`)
            const w = ele.clientWidth
            const h = ele.clientHeight
            console.log("w,h:",w,h)
            let oImg = new Image();  
            oImg.src = props.cardUrl;
            let ww,hh
            oImg.onload = function() {
                // 按照宽度压缩
                let type = 1  // 1是按照宽度压缩，2按照高度压缩
                ww = w
                hh = (oImg.height * w)/oImg.width
                //console.log(`按照宽度${w}压缩后的图片大小,height:${hh},width:${ww}`)
                if(hh<h){
                    // 按照高度压缩
                    hh = h
                    ww = (oImg.width * h)/oImg.height
                    type = 2
                }
                
                // 清空
                document.querySelector(`#${props.id} .fragment1`).style.background = "none"
                document.querySelector(`#${props.id} .fragment2`).style.background = "none"
                document.querySelector(`#${props.id} .fragment3`).style.background = "none"
                document.querySelector(`#${props.id} .fragment4`).style.background = "none"


                setTimeout(()=>{
                    props.fragmentNoList.forEach(item =>{
                        const bgEle = document.querySelector(`#${props.id} .fragment${item}`)
                        bgEle.style.backgroundImage = `url(${oImg.src})`
                        bgEle.style.backgroundSize = `${ww}px ${hh}px`
                        if(item==1){
                            let ps = ''
                            if(type==1){
                                ps = `0 -${(hh-h)/2}px`
                            }else{
                                ps = `-${(ww-w)/2}px 0`
                            }
                            bgEle.style.backgroundPosition = ps 
                        }else if(item==2){
                            const span1 = document.querySelector('.fragment1')
                            let ps = ''
                            if(type==1){
                                ps = `-${span1.clientWidth}px -${(hh-h)/2}px`
                            }else{
                                ps = `-${(ww-w)/2 + span1.clientWidth}px 0`
                            }
                            bgEle.style.backgroundPosition = ps 
                        }else if(item==3){
                            const span1 = document.querySelector('.fragment1')
                            let ps = ''
                            if(type==1){
                                ps = `0 -${span1.clientHeight + (hh-h)/2}px`
                            }else{
                                ps = `-${(ww-w)/2}px -${span1.clientHeight}px`
                            }
                            bgEle.style.backgroundPosition = ps 
                        }else if(item==4){
                            const span2 = document.querySelector('.fragment2')
                            const span4 = document.querySelector('.fragment4')
                            let ps = ''
                            if(type==1){
                                ps = `-${span4.clientWidth}px -${span2.clientHeight + (hh-h)/2}px`
                            }else{
                                ps = `-${span4.clientWidth + (ww-w)/2}px -${span2.clientHeight}px`
                            }
                            bgEle.style.backgroundPosition = ps //'right bottom'
                        }
                    })
                },10)
            }
        })

        const getNumber = (num)=>{
            if(!num || !props.item.fragmentList) return
            const res = props.item.fragmentList.find(ele =>ele.fragmentNo == num)
            if(res && res.fragmentNum){
                return res.fragmentNum
            }else{
                return ''
            }
        }

        return{
            ...toRefs(state),
            getNumber,
        }
    }
}
</script>

<style lang="scss" scoped>
    .bg-fragmentUnionBox{
        position: relative;
        z-index: 10;
        font-size: 0;
        width: 100%;
        height: 100%;
        .frgImgBox{
            width: 100%;
            height: 100%;
            background-position: center center;
            background-size:cover ;
            background-repeat: no-repeat;
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
        }
        .fragmentBox{
            display: flex;
            flex-flow: column;
            position: absolute;
            z-index: 11;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            //background: rgba(0,0,0,0.5);
            .ft-top,.ft-bottom{
                display: flex;
                flex: 1;
                span{
                    position: relative;
                    z-index: 10;
                    background: rgba(0,0,0,0.2);
                    flex: 1;
                    background-repeat: no-repeat;
                    flex-shrink: 0;
                    em{
                        display: flex;
                        position: absolute;
                        z-index: 10;
                        justify-content: center;
                        align-items: center;
                        background: #FF6600;
                        width: 35px;
                        height: 35px;
                        bottom: 5px;
                        right: 5px;
                        border-top-right-radius: 8px;
                        border-bottom-left-radius: 8px;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        font-size: 20px;
                        color: #fff;
                        font-style: normal;
                    }
                }
            }
            .ft-top{
                span{
                    border-bottom: 1px solid rgba(255,255,255,0.5);
                    &+span{
                        border-left: 1px solid rgba(255,255,255,0.5);
                    }
                }
            }
            .ft-bottom{
                span{
                    &+span{
                        border-left: 1px solid rgba(255,255,255,0.5);
                    }
                }
            }
        }
    }
</style>